<template>
  <div class="top">

    <div class="input1">
      <el-input v-model="obj.idorname" placeholder="请输入访客名称" />
    </div>

    <div class="input1">
      <el-input v-model="obj.mobile" placeholder="请输入手机号" />
    </div>

    <div class="input1">
      <el-select placeholder="请选择人员类型" v-model="value">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>

    <div class="input1">
      <el-select v-model="value1" placeholder="是否离校">
        <el-option v-for="item in opt" :key="item.value1" :label="item.label" :value="item.value1" />
      </el-select>
    </div>

    <div class="input1">
      <el-select v-model="value2" placeholder="请选择审核状态">
        <el-option v-for="item in state" :key="item.value2" :label="item.label" :value="item.value2" />
      </el-select>
    </div>

    <el-cascader v-model="value3" :props="props" :options="options2" style="width: 160px;margin-right: 10px;"
      placeholder="选择部门" />

    <el-date-picker class="picker" v-model="value4" type="datetime" placeholder="进校时间" />

    <el-date-picker class="picker" v-model="value5" type="datetime" placeholder="出校时间" />

  </div>

  <!-- 按钮 -->
  <div class="botton">
    <div class="head_cen">
      <el-button type="primary" @click="inquire">查询</el-button>
      <el-button type="success" @click="add">添加</el-button>
      <el-button type="warning" @click="batchAudit">批量审核</el-button>
      <el-button type="info" @click="derive">批量导出</el-button>
      <el-button type="warning">批量导入</el-button>
    </div>
  </div>


  <!-- 表格 -->
  <el-table :data="tabData" style="width: 100%" border height="540" @selection-change="handleSelectionChange">
    <el-table-column type="selection" align="center" width="50" />
    <el-table-column align="center" prop="username" label="用户名" width="110" />
    <el-table-column align="center" prop="mobile" label="手机号" width="130" />
    <el-table-column align="center" property="department" label="部门" width="100" />
    <el-table-column align="center" property="starttime" label="进校时间" />
    <el-table-column align="center" property="endtime" label="离校时间" />
    <el-table-column align="center" property="typename" label="人员类型" />
    <el-table-column align="center" label="状态">
      <template #default="scope">

        <el-tag type="warning" v-if="scope.row.is_status === 0">
          {{ scope.row.is_status === 0 ? "待初审" : '初审拒绝' }}
        </el-tag>

        <el-tag type="info" v-if="scope.row.is_status === 1">
          {{ scope.row.is_status === 1 ? "待二审" : '二审拒绝' }}
        </el-tag>

        <el-tag type="info" v-if="scope.row.is_status === 3">
          {{ scope.row.is_status === 3 ? "待终审" : '终审拒绝' }}
        </el-tag>

        <el-tag type="success" v-if="scope.row.is_status === 5">
          {{ scope.row.is_status === 5 ? "终审通过" : '终审拒绝' }}
        </el-tag>

        <el-tag type="danger" v-if="scope.row.is_status === 6">
          {{ scope.row.is_status === 6 ? "终审拒绝" : '终审通过' }}
        </el-tag>

      </template>
    </el-table-column>
    <el-table-column align="center" label="是否离校" width="90">
      <template #default="scope">
        {{ scope.row.type === 1 ? "否" : "是" }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="200">
      <template #default="scope">
        <!-- <el-button type="danger" >删除</el-button> -->

        <el-popconfirm confirm-button-text="确定" cancel-button-text="拒绝" :icon="InfoFilled" icon-color="#626AEF"
          title="审核?" @confirm="confirmEvent(scope.row.v_id)" @cancel="cancelEvent">
          <template #reference>
            <el-button type="success" v-if="scope.row.status == 1">审核</el-button>
            <el-button type="danger" v-else="scope.row.status == 3" disabled>已审核</el-button>
          </template>
        </el-popconfirm>

        <el-button type="info" @click="particulars(scope.row.v_id)">详情</el-button>

      </template>
    </el-table-column>

  </el-table>

  <!-- 分页 -->
  <div class="page">
    <el-config-provider :locale="zhCn">
      <el-pagination v-model:currentPage="obj.page" v-model:page-size="obj.pageSize" :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper" :total="totals" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-config-provider>
  </div>
</template>

<script setup lang='ts'>
import { visitList, departmentList, audit, visituserExcel } from '../../api/visituser' //接口
import { reactive, ref } from 'vue';
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import router from "../../router/router";// 路由跳转
import { ElMessage, ElNotification } from "element-plus";
import { InfoFilled } from '@element-plus/icons-vue'
// import * as XLSX from "xlsx";  // 导出文件


// 下拉框 请选择人员类型
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: '外来人员'
  },
  {
    value: 'Option2',
    label: '老师'
  },
  {
    value: 'Option3',
    label: '学生'
  }
]
// 是否离校
const value1 = ref('')
const opt = [
  {
    value1: 'Option1',
    label: '已离校'
  },
  {
    value1: 'Option2',
    label: '未离校'
  }
]
// 下拉框 审核状态
let value2 = ref('')
let state = [
  {
    value2: 'Option1',
    label: '已取消'
  },
  {
    value2: 'Option2',
    label: '待初审'
  },
  {
    value2: 'Option3',
    label: '初审拒绝'
  },
  {
    value2: 'Option4',
    label: '待二审'
  },
  {
    value2: 'Option5',
    label: '二审拒绝'
  },
  {
    value2: 'Option6',
    label: '待终审'
  },
  {
    value2: 'Option7',
    label: '终审通过'
  }
]

// 级联选择器
let value3 = ref('')
let props = {
  value: 'name',
  label: 'name',
  children: 'son'
}
let options2: any = ref([])

let getDepartmentList = async () => {
  let res = await departmentList()
  console.log(res);
  options2.value = res.data
}
getDepartmentList()


// 日期选择器
const value4 = ref('')  //进校时间
const value5 = ref('') //出校时间


// 列表
let totals: any = ref(0)  // 一共多少条数据

let tabData: any = ref([]) //数据

let obj = reactive({
  page: 1,
  pageSize: 10,
  idorname: '',
  mobile: '',
  starttime: value4,
  endtime: value5,
  department: value3,
  // status:value2
})

let data = async () => {
  let res: any = await visitList(obj)
  console.log(res);
  tabData.value = res.data
  totals.value = res.total
}
data()

// 分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  data()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  data()
}

// 查询
let inquire = () => {
  data()
}

// 详情
let particulars = (data: any) => {
  console.log(data);
  router.push({ path: 'particulars', query: { data } })
}

// 审核
const confirmEvent = async (id: any) => { //确定
  let res = await audit({ v_id: id })
  console.log(res);
  data()
}
const cancelEvent = () => { //拒绝

}

// 批量审核
// 点击多选框获取到id
let multipleSelection: any = ref([])
const handleSelectionChange = (val: any) => {
  console.log(val);
  // 处理数据 获取到选中的id
  multipleSelection.value = val.map((item: any) => item.v_id)
  console.log(multipleSelection.value)
}

let batchAudit = async () => {
  let id: any = []
  id = multipleSelection.value //多选框获取到id
  let res: any = await audit({ v_id: id })
  console.log(res);
  if (res.code == '00000') {
    data()
    ElMessage({
      message: "审核成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "请先选择你要审核的数据",
      type: "error",
    });
  }
}

let add = () => {
  router.push("inline-edit-table")
}



// 导出
let derive = async () => {

  // 第一种方法
  let res: any = await visituserExcel()
  console.log(res);
  if (res.code == '00000') {
    ElNotification({
      title: '成功',
      message: '导出成功',
      type: "success",
    })
    window.open(res.file) //下载
  } else {
    ElNotification({
      title: '失败',
      message: '导出失败',
      type:'warning'
    })
  }

  // 第二种
  // // 1.创建工作表
  // let data = XLSX.utils.json_to_sheet(tabData.value)
  // // 2.创建工作簿
  // let wb = XLSX.utils.book_new()
  // // 3.把工作表放到工作簿中
  // XLSX.utils.book_append_sheet(wb,data,"data")
  // // 4.生成文件并下载
  // XLSX.writeFile(wb,'访客管理.xlsx')
}



</script>

<style scoped lang='less'>
.top {
  width: 100%;
  height: 40px;
  // background-color: antiquewhite;
  display: flex;
}

.input1 {
  width: 150px;
  margin-right: 10px;
}

.botton {
  margin-top: 10px;
  margin-bottom: 20px;
}

.page {
  margin-top: 20px;
  display: flex;
  justify-content: end;
}
</style>